<template>
	<view>
		<mc-framework navTitle="劳伦斯工控机" @changeLevel="changeLevel">

			<!-- <template #workbench>
				<view style="height: 40px;">
					工作台
				</view>
			</template> -->

			<!-- 主内容 -->
			<view class="contentBox">
				<view class="grid-container">
					<view class="grid-item y-f" v-for="item in moduleData_show" :key="item.MesMenuID"
						@click="itemClick(item)">

						<u-icon name="setting-fill" color="#dbb56a" size="30"></u-icon>

						<view style="margin-top: 10px;">
							<text>{{item.Name}}</text>
						</view>
					</view>
				</view>

			</view>

		</mc-framework>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moduleData_basic: [],
				moduleData_show: [],
			};
		},
		onLoad() {
			plus.screen.lockOrientation('landscape-primary');

			this.getModuleData();

			let routes = getCurrentPages();
			let currentRoute = routes[routes.length - 1];

			this.$store.commit('GuyueModule/ChangeAndSetStateData', {
				Name1: 'mesRouteInfo',
				data: {
					routeIndex: routes.length,
					route: currentRoute.route,
					options: currentRoute.options,
				}
			})

		},
		mounted() {
			let that = this;
			uni.$on('changeLevel', function(data, row) {
				that.changeLevel(data, row)
			})
		},
		onUnload() {
			uni.$off('changeLevel');
			plus.screen.lockOrientation('portrait-primary');

			// 重置工作台已选内容
			this.$store.commit('GuyueModule/ChangeAndSetStateData', {
				Name1: 'ModuleData_select',
				data: [{
					Name: '工作台',
					MesMenuID: 0,
					nood: []
				}]
			});

			// 清除模块数据
			this.$store.commit('GuyueModule/ChangeAndSetStateData', {
				Name1: 'ModuleData',
				data: []
			});

			// 清除基础展示数据
			this.$store.commit('GuyueModule/ChangeAndSetStateData', {
				Name1: 'MesBasicInfo',
				data: {}
			});

			// 清除工作台页面栈信息
			this.$store.commit('GuyueModule/ChangeAndSetStateData', {
				Name1: 'mesRouteInfo',
				data: {}
			});
		},
		methods: {
			changeLevel(data, row) {
				if (data.length == 1) { // 顶级

					this.moduleData_show = this.$store.state.GuyueModule.ModuleData;
				} else {
					let backData = data.filter(item => {
						return item.MesMenuID == row.MesMenuID
					});
					this.moduleData_show = backData[0]['nood'][0]['children'];
				}
			},
			getModuleData() { // 获取数据
				let that = this;

				that.Request.request('Mes_MenusList', {
					UserID: this.$store.state.UserInfo.UserID
				}, (ret) => {
					if (ret.status == 200) {

						let backData = this.buildTree(ret.data.ds);

						// 获取的所有模块数据
						// 存储到vuex
						this.$store.commit('GuyueModule/ChangeAndSetStateData', {
							Name1: 'ModuleData',
							data: backData
						})

						this.moduleData_basic = JSON.parse(JSON.stringify(backData));
						this.moduleData_show = JSON.parse(JSON.stringify(backData));

					}
				})
			},
			buildTree(items) {
				// 创建一个映射，用于快速查找具有特定ID的菜单项  
				const map = {};
				items.forEach(item => {
					map[item.MesMenuID] = item;
					item.children = []; // 初始化子菜单数组  
				});

				// 构建树  
				const tree = [];
				items.forEach(item => {
					// 查找父菜单项，并添加到其children数组中  
					// 如果UpID为0，则它是根节点，直接添加到树数组中  
					if (item.UpID === 0) {
						tree.push(item);
					} else if (map[item.UpID]) {
						map[item.UpID].children.push(item);
					}
				});

				return tree;
			},
			itemClick(data) { // 点击模块数据 
				let nood = this.moduleData_show.filter(item => {
					return item.MesMenuID == data.MesMenuID
				});
				let obj = {
					Name: data.Name,
					MesMenuID: data.MesMenuID,
					nood: nood
				}

				// 修改展示数据
				this.moduleData_show = this.$utils.deepClone(data['children']);
				let newData = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.ModuleData_select));
				newData.push(obj);
				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData_select',
					data: newData
				})

				if (!data.children.length) { // 判断是否存在子数据
					// 末级
					if (data.Name != '工作台') {
						// 判断是否存在跳转路径
						// if (data.hasOwnProperty('path') && !this.$utils.isEmpty(data.path)) {
						uni.navigateTo({
							url: '/mes/common/list',
							animationType: "none",
						});
						// }

					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.contentBox {
		width: 100%;
		overflow: auto;
	}

	/* 如果需要每行恰好三个格子，并且格子大小固定或可预测，可以这样做： */
	.grid-container {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 14px;
	}

	.grid-item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100px;
		background-color: #282828;
		color: #fff;
		border-radius: 8px;
	}
</style>